import React from 'react';
import HolyGrailLayout from '../components/HolyGrailLayout';
import LeftSidebar from '../components/LeftSidebar';
import Navigation from '../components/Navigation';

interface OthersProps {}

const Others: React.FC<OthersProps> = () => {
  const mainContent = (
    <div className="main-content">
      <article className="hero-section">
        <h1>其他 CSS 技巧</h1>
        <p className="hero-subtitle">
          动画、过渡、变换等高级CSS技巧
        </p>
      </article>

      <section className="others-examples">
        <h2>高级技巧示例</h2>
        <div className="examples-grid">
          <div className="example-card">
            <h3>CSS 动画</h3>
            <div className="demo-box">
              <div className="animation-demo">
                <div className="animate-item bounce">弹跳</div>
                <div className="animate-item pulse">脉冲</div>
                <div className="animate-item spin">旋转</div>
                <div className="animate-item fade">淡入淡出</div>
              </div>
            </div>
            <p>使用 @keyframes 创建动画效果</p>
          </div>

          <div className="example-card">
            <h3>过渡效果</h3>
            <div className="demo-box">
              <div className="transition-demo">
                <div className="transition-item width">宽度过渡</div>
                <div className="transition-item color">颜色过渡</div>
                <div className="transition-item transform">变换过渡</div>
              </div>
            </div>
            <p>使用 transition 创建平滑过渡</p>
          </div>

          <div className="example-card">
            <h3>3D 变换</h3>
            <div className="demo-box">
              <div className="transform-demo">
                <div className="transform-item rotate-x">X轴旋转</div>
                <div className="transform-item rotate-y">Y轴旋转</div>
                <div className="transform-item rotate-z">Z轴旋转</div>
              </div>
            </div>
            <p>使用 transform 创建3D效果</p>
          </div>

          <div className="example-card">
            <h3>伪元素</h3>
            <div className="demo-box">
              <div className="pseudo-demo">
                <div className="pseudo-item before">::before</div>
                <div className="pseudo-item after">::after</div>
                <div className="pseudo-item hover">:hover</div>
              </div>
            </div>
            <p>使用伪元素创建装饰效果</p>
          </div>
        </div>
      </section>

      <section className="advanced-tips">
        <h2>高级技巧</h2>
        <div className="tips-grid">
          <div className="tip-card">
            <h4>🎭 动画性能</h4>
            <ul>
              <li>优先使用 transform 和 opacity</li>
              <li>避免动画期间触发重排重绘</li>
              <li>使用 will-change 提示浏览器优化</li>
            </ul>
          </div>
          
          <div className="tip-card">
            <h4>🎨 创意效果</h4>
            <ul>
              <li>使用 clip-path 创建复杂形状</li>
              <li>使用 mix-blend-mode 混合模式</li>
              <li>使用 backdrop-filter 毛玻璃效果</li>
            </ul>
          </div>

          <div className="tip-card">
            <h4>⚡ 性能优化</h4>
            <ul>
              <li>使用 CSS 变量提高维护性</li>
              <li>合理使用 GPU 加速</li>
              <li>避免过度使用复杂选择器</li>
            </ul>
          </div>
        </div>
      </section>
    </div>
  );

  const header = (
    <div className="site-header">
      <div className="header-content">
        <div className="header-top">
          <h1 className="site-title">其他 CSS 技巧</h1>
          <p className="site-description">高级CSS技术和创意效果</p>
        </div>
        <Navigation />
      </div>
    </div>
  );

  const footer = (
    <div className="site-footer">
      <div className="footer-content">
        <p>&copy; 2025 刘春生个人整理. 专注于前端技术分享</p>
        <div className="footer-links">
          <a href="#">关于我</a>
          <a href="#">联系方式</a>
          <a href="#">RSS订阅</a>
        </div>
      </div>
    </div>
  );

  return (
    <HolyGrailLayout
      header={header}
      leftSidebar={<LeftSidebar />}
      mainContent={mainContent}
      footer={footer}
    />
  );
};

export default Others;
